<template>
  <div class="container">
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="文件类别" required="true">
      <el-select v-model="form.category" placeholder="请选择文件类别">
        <el-option label="项目需求说明书" value="1"></el-option>
        <el-option label="项目详细设计说明书" value="2"></el-option>
        <el-option label="项目概要设计说明书" value="3"></el-option>
        <el-option label="项目测试报告" value="4"></el-option>
        <el-option label="实验报告" value="5"></el-option>
        <el-option label="测试分析报告" value="6"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="选择文件" required="true">
      <el-upload
        class="upload-demo"
        ref="upload"
        action="http://localhost:8080/students/file/submitFile"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :on-success="handelSucesss"
        :before-upload="beforeAvatarUpload"
        :file-list="fileList"
        :data="form"
        :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      </el-upload>
    </el-form-item>
    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">提交</el-button>
  </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        category: '',
        s_id: ''
      },
      fileList: [],
      leader: ''
    }
  },
  methods: {
    submitUpload() {
      this.leader = this.$store.getters.leader
      if (this.leader !== 0) {
        if (this.form.category === '') {
          this.$message({
            message: '请选择文件类别',
            type: 'error'
          })
          return false
        }
        this.form.s_id = this.$store.getters.s_id
        this.$refs.upload.submit()
      } else {
        this.$message({
          message: '只有组长可以提交',
          type: 'error'
        })
        return false
      }
    },
    handelSucesss(response, file, fileList) {
      this.$message({
        message: response.message,
        type: response.data.message
      })
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(this.fileList)
      console.log(file.name)
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}?`)
    },
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-1)
    },
    beforeAvatarUpload(file) {
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 60%;
  margin-top: 20px;
  margin-inline: auto;
}
</style>
